<template>
  <div class='quer-setting'>
    <div class="ques-box pr">
      <el-button
        class="pa download-btn"
        type="button"
          @click="download"
        >人员下载</el-button>
      <ul class="operate-b">
        <!-- <li v-for="(item,index) in menuData" :key="index">
          <span class="label">{{item.label}}</span>
          <el-switch v-if="item.type=='switch'" :width="60" v-model="questionInfo[item.key]" @change="item.method" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          <el-select v-else-if="item.type=='select'" clearable filterable @change="item.method" v-model="settingInfo[item.key]" placeholder="请选择">
            <el-option
              v-for="item in item.array"
              :key="item.value||item"
              :label="item.label||item"
              :value="item.value||item">
            </el-option>
          </el-select>
          <el-button v-else-if="item.type=='button'" :type="item.class" @click="item.method">{{item.btnName}}</el-button>
        </li> -->
        <li
          v-for="(item,index) in menuData"
          :key="index"
          class="pr"
        >
          <div
            v-for="(one,oneIndex) in item"
            :key="oneIndex"
            class="one-b"
          >
            <span class="label">{{one.label}}</span>
            <el-switch
              v-if="one.type=='switch'"
              :width="60"
              v-model="questionInfo[one.key]"
              @change="one.method"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
            <el-select
              v-else-if="one.type=='select'"
              clearable
              filterable
              @change="one.method"
              v-model="settingInfo[one.key]"
              placeholder="请选择"
              :disabled="questionInfo.start"
            >
              <el-option
                v-for="two in one.array"
                :key="two.value||two"
                :label="two.label||two"
                :value="two.value||two"
              >
              </el-option>
            </el-select>
            <el-button
              v-else-if="one.type=='button'"
              :type="one.class"
              @click="one.method"
            >{{one.btnName}}</el-button>
            <img
              v-else-if="one.type=='img'"
              :src="one.url"
              alt="img"
            >
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      settingInfo: {
        num: 10,
        time: 30,

        id: "1" //当前题目id
      },
      menuData: [
        [
          {
            key: "num",
            label: "答题关数",
            type: "select",
            array: [10,15,20,25,30],
            method: this.changeSelect
          },
          {
            key: "time",
            label: "答题时间",
            type: "select",
            array: [10,15,20,25,30],
            method: this.changeTime
          }
        ],
        [{ type: "img", url: require("../../assets/images/arrow-right.png") }],
        [
          {
            key: "start",
            label: "答题闯关",
            type: "switch",
            method: this.changeSwitch
          }
        ],
        [{ type: "img", url: require("../../assets/images/arrow-right.png") }],
        [
          {
            class: "info",
            label: "答题控制",
            btnName: "下一题",
            type: "button",
            method: this.doNext
          }
        ]
        // {class:"primary",label: "答案显示",btnName:"显示",type: "button",method: this.showAns},
      ],

      questionInfo: {
        qId: "",
        start: false, //是否开始答题
        time: 30
      },
      settime: null
    };
  },
  methods: {
    changeSwitch(val) {
      // 开启
      if (val) {
        this.questionInfo.start=false
        this.$store.state.confirmInfo.message="请确认入会人员进入闯关答题模块!!!"
        this.$store.state.confirmInfo.OK=this.alertSure
        this.$store.state.confirmInfo.show=true
      } else {
        this.questionInfo.start = true;
        this.$store.state.alertInfo.show = true;
        this.$store.state.alertInfo.message =
          "闯关答题已开启，闯关答题结束后会自动关闭!";
      }
    },

    alertSure() {
      _g.apiPost("answer/openGame.do", {
        num: this.settingInfo.num,
        time: this.settingInfo.time
      }).then(res => {
        if (res.status) {
          this.questionInfo.start = false;
          _g.toMessage(res);
        } else {
          this.questionInfo.start=true
          _g.apiPost("answer/getQuestionInfo.do", { sequence: "" }).then(
            res => {
              if (res.status == 1) {
                _g.toMessage({ status: 0, msg: "答题结束，已显示通过名单" });
                socket_qa.send("pass");
                return;
              }
              this.questionInfo.qId = res.data.sequenceNum + 1;
              res.data.time = this.settingInfo.time || 30;
              socket_qa.send(JSON.stringify(res.data));
              this.questionInfo.time = this.settingInfo.time;
              this.settime = setInterval(() => {
                this.questionInfo.time--;
                if (this.questionInfo.time == 0) {
                  clearInterval(this.settime);
                }
              }, 1000);
            }
          );
        }
      });
    },
    sureConfirm() {
      this.questionInfo.start = false;
    },
    cancelConfirm() {},
    changeSelect() {
      var params = {
        num: this.settingInfo.num
      };
      return;
      _g.apiPost("answer/openGame.do", params).then(res => {
        _g.toMessage(res);
      });
    },
    changeTime() {
      console.log("改变答题时间设置");
    },
    showAns() {
      if (!this.questionInfo.start) {
        _g.toMessage({ status: 1, msg: "答题闯关未开始" });
        return;
      }
      socket_qa.send("display");
    },
    doNext() {
      if (!this.questionInfo.start) {
        _g.toMessage({ status: 1, msg: "答题闯关未开始" });
        return;
      }
      // else if(this.questionInfo.start&&this.questionInfo.time>0){
      //   _g.toMessage({status:1,msg:'目前题目还没有结束'})
      //   return
      // }

      _g.apiPost("answer/getQuestionInfo.do", {
        sequence: this.questionInfo.qId
      }).then(res => {
        if (res.status == 1) {
          _g.toMessage({ status: 0, msg: "答题结束，已显示通过名单" });
          socket_qa.send("pass");
          return;
        }
        this.questionInfo.qId = res.data.sequenceNum + 1;
        res.data.time = this.settingInfo.time || 30;
        socket_qa.send(JSON.stringify(res.data));
      });
    },

    getDefault() {
      _g.apiPost("answer/initPage.do").then(res => {
        this.$set(this.settingInfo, "num", res.data.count || 30);
        this.$set(this.settingInfo, "time", res.data.targetTime || 30);
        this.$set(this.questionInfo, "start", res.data.gameStatus == 1); //0未开启  1已开启
        if (res.data.questionNum)
          this.$set(this.questionInfo, "qId", res.data.questionNum + 1);
      });
    },

    download(){
      location.href=PATH+"answer/exportWinner.do"
    }
  },
  created() {
    this.getDefault();
  }
};
</script>
<style lang="scss" scoped>
.quer-setting {
  height: 100%;
  flex-grow: 1;
  display: inherit;
  padding: 15px 20px;

  .download-btn{
    right: 0;
  }

  .ques-box {
    width: 100%;
    background-color: aliceblue;
    box-sizing: border-box;
    color: #999;
    position: relative;

    .operate-b {
      position: absolute;
      display: inline-block;
      width: auto;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 900px;
      display: flex;
      justify-content: space-between;

      > li:nth-of-type(1) {
        background: white;
        height: 200px;
        padding: 20px 50px;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      > li:nth-of-type(2),
      > li:nth-of-type(4) {
        > .one-b {
          min-height: 32px;
          transform: translateY(104px);
        }
      }
      > li:nth-of-type(3),
      > li:nth-of-type(5) {
        background: white;
        height: 200px;
        padding: 20px 50px;
        border-radius: 5px;

        > .one-b {
          transform: translateY(60px);
        }
      }
    }
    .label {
      line-height: 40px;
      font-size: 20px;
      margin-right: 20px;
    }
    .one-b {
      min-height: 80px;

      > span {
        display: block;
        text-align: center;
      }
    }
  }
}
</style>